<template>

    <div v-loading="loading" class="video-panel">
      <!--@click.prevent解决全屏时，点击video会暂停的问题-->
      <!--controlslist="nodownload" disablePictureInPicture 解决Microsoft Edge浏览器出现下载和画中画等更多控件的问题-->
      <video ref="video" class="video" autoplay muted controlslist="nodownload" disablePictureInPicture @dblclick="doFullScreen" @click.prevent>
      </video>
      <div class="controls">
        <span v-if="mutedControl && !loading && isStreamLive" class="iconfont icon-audio audio-btn" :class="{'audio-btn-muted':muted}" @click="switchMuted"></span>
      </div>

    </div>

</template>

<script>
import {VideoFlv} from "@haiking/haiking-jstool";

import screenfull from 'screenfull'
import {
  startRealtimeVideoStream,
} from "@/api/video";
export default {
  props: {
    mutedControl: {
      type: Boolean,
      default: true,
    },
    video: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      visible: false,
      keepInterval: undefined,
      isStreamLive: false,
      loading: false,

      muted: true,
    }
  },
  watch: {
    video: {
      handler: function(val,oldVal) {
        if (val && val.id && val.id != (oldVal?.id)) {
          this.$nextTick(() => {
            this.initVideo(val);
          })
        }
      },
      immediate: true,
    }

  },
  mounted() {
      // this.$nextTick(() => {
      //   if (this.video && this.video.id) {
      //      this.initVideo(this.video);
      //   }
      // })
  },

  methods: {
    close() {
      this.visible = false;
      this.$emit("close");
      if (this.video && this.isStreamLive) {
        this.stopVideoStream(this.video);
        // 关闭录音资源
        this.closeSystemRecorder()
      }
    },
    // 全屏
    doFullScreen() {
        const videoElem = this.$refs.video
        if (screenfull.isEnabled) {
            screenfull.request(videoElem)
        }
    },

    async initVideo(video) {
      // 切换摄像头，将正在直播的状态关掉
      this.isStreamLive = false;
      this.loading = true;
      const startResult = await startRealtimeVideoStream({
        cameraId: video.code,
        clientType: 1,
        platform: "sturgeon",
        streamQuality: video.cameraType == "1" ? "01" : "0",// 大华的streamQuality为0，海康的为01
        channelId: video.channelId,
        streamType: 1,// 历史流2，实时流1
        shipCatCode: video.shipcatCode,
        cameraType: video.cameraType,
      });
      this.loading = false;

      if (!startResult.result || !startResult.result.streamUrl) {
        return;
      }
      // const startResult = {
      //   result: {
      //     streamUrl: "http://192.168.3.38/live?port=1935&app=live&stream=room"
      //   }
      // }
      const videoElement = this.$refs.video;
      this.videoFlv = new VideoFlv(
        {
          type: "flv", // 如果是直播流需要设置这个值为 true
          isLive: true, // 拉流示例地址，stream参数一定要和推流时所设置的流密钥一致，app是推流的uri
          // url: "http://192.168.3.195/live?port=1935&app=live&stream=room",
          // url: "http://192.168.3.144/live?port=1935&app=live&stream=201",
          // url: "http://192.168.3.195/hls/room.m3u8",
          // url: "http://192.168.1.221/live?port=1935&app=live&stream=room",
          url: startResult.result.streamUrl
        },
        {
          videoElement: videoElement,
          enableWorker: false, // 启用分离的线程进行转换
          enableStashBuffer: false, // 关闭IO隐藏缓冲区
          // stashInitialSize: 128, // 减少首帧显示等待时长
          // headers: {
          //   Authorization: this.$auth.getToken();,
          // },
        }
      );
      this.isStreamLive = true;
    },
    // 切换静音
    switchMuted() {
      this.muted = !this.muted;
      if (this.$refs.video) {
        this.$refs.video.muted = this.muted;
      }
    },
    /**
     * 获取正在直播的摄像头
     */
    getLiveVideo() {
      if (this.isStreamLive) {
        return this.video;
      }
      return undefined;
    }

  },
}
</script>
<style lang="scss" scoped>
// /* 隐藏video 全屏按钮 */
// .video::-webkit-media-controls-fullscreen-button {
//     display: none;
// }
// /* 隐藏video 播放按钮 */
// .video::-webkit-media-controls-play-button {
//     display: none;
// }
// /* 隐藏video 进度条 */
// .video::-webkit-media-controls-timeline {
//     display: none;
// }
// /* 隐藏video 观看的当前时间 */
// .video::-webkit-media-controls-current-time-display{
//     display: none;
// }
// /* 隐藏video 剩余时间 */
// .video::-webkit-media-controls-time-remaining-display {
//     display: none;
// }
// /* 隐藏video 音量按钮 */
// // .video::-webkit-media-controls-mute-button {
// //     display: none;
// // }
// .video::-webkit-media-controls-toggle-closed-captions-button {
//     display: none;
// }
// /* 隐藏video 音量的控制条 */
// .video::-webkit-media-controls-volume-slider {
//     display: none;
// }
// /* 隐藏video 所有控件 */
// .video::-webkit-media-controls-enclosure{
//     display: none;
// }

video::-webkit-media-controls,
    video::-moz-media-controls,
    video::-webkit-media-controls-enclosure{
    display:none !important;
}

video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-start-playback-button {
    display:none !important;
    -webkit-appearance: none;
}

// //播放按钮
// video::-webkit-media-controls-play-button {
//     display: none;
// }
// //进度条
// video::-webkit-media-controls-timeline {
//     display: none;
// }
// //观看的当前时间
// video::-webkit-media-controls-current-time-display{
//     display: none;
// }
// //剩余时间
// video::-webkit-media-controls-time-remaining-display {
//     display: none;
// }

::v-deep .el-dialog__body{
  padding:3px;
  border-radius: 0;
}
.video-panel{
  width:100%;
  height:100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .controls{
    position:absolute;
    display:flex;
    justify-content:space-between;
    align-items:center;
    bottom:5px;
    right:5px;
    span{
      margin-left:5px;
      line-height: normal;
      padding: 5px;
      border-radius: 6px;
      cursor: pointer;
      background-color: #040404d9;
      color: #ffffff;
      font-size:10px;
    }
    .audio-btn{
      color:#3accfd;

      &:before{
        font-size:19px;
      }
    }
    .audio-btn-muted{
      color:gray;

    }
    .recorder-btn{
      //padding: 7px 10px;
      padding: 5px 10px;
      font-size: 14px;
    }

  }
  .recwave{
    height: 100px;
    width: 300px;
    position: absolute;
    bottom: 46px;
    right: 10px;
    border: 1px solid black;
    border-radius: 5px;
    background: #000000ad;

  }
}
.video{
  width:100%;
}
</style>

